<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      @toAdd="addBtn()"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="头像" min-width="50">
            <template slot-scope="scope">
              <div class="img_bor_tx">
                <img :src="$fnc.getImgUrl(scope.row.avatar)" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="昵称" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>

          <el-table-column label="添加时间" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.created_time | getTimeFormat }}
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="warning"
                size="mini"
                @click="editBtn(scope.row)"
              >
                详情
              </el-button>
              <el-button
                :loading="$store.state.isLoading"
                v-if="scope.row.expires_in < now_time"
                type="primary"
                size="mini"
                @click="addBtn()"
              >
                重新授权
              </el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteNews(scope.row.id)"
                type="danger"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="详情"
      :modal-append-to-body="false"
      :visible.sync="show_edit"
      class="tl size_13"
      width="600px"
    >
      <el-form label-width="140px">
        <el-form-item label="账号令牌：">
          <el-col :span="20">
            {{ editInfo.access_token }}
          </el-col>
        </el-form-item>
        <el-form-item label="刷新令牌：">
          <el-col :span="20">
            {{ editInfo.refresh_token }}
          </el-col>
        </el-form-item>
        <el-form-item label="令牌期时间：">
          <el-col :span="20">
            {{ editInfo.expires_in | getTimeFormat }}
          </el-col>
        </el-form-item>
        <el-form-item label="刷新令牌期时间：">
          <el-col :span="20">
            {{ editInfo.refresh_expires_in | getTimeFormat }}
          </el-col>
        </el-form-item>
        <el-form-item label="授权权限：">
          <el-col :span="20">
            {{ editInfo.scope }}
          </el-col>
        </el-form-item>
        <el-form-item label="union_id：">
          <el-col :span="20">
            {{ editInfo.union_id }}
          </el-col>
        </el-form-item>
        <el-form-item label="open_id：">
          <el-col :span="20">
            {{ editInfo.open_id }}
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer
      :visible.sync="show_info"
      direction="rtl"
      :modal="true"
      size="40%"
      class="user_edit_drawer"
    >
    </el-drawer>
  </div>
</template>

<script>
import { accountManageSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: accountManageSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      editInfo: {},
      show_edit: false,
      now_time: parseInt(new Date().getTime() / 1000),
    };
  },
  components: {},
  created() {
    this.getNewsAll();
  },
  methods: {
    addBtn() {
      this.$api.getdy.get_douyin_saveadd({}).then((res) => {
        if (res.data.code == 200) {
          window.open(res.data.result);
        }
      });
    },
    deleteNews(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getdy.get_douyin_del(data).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll();
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    },
    editBtn(item) {
      this.editInfo = item;
      this.show_edit = true;
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getdy.get_douyin_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style>
</style>